<template>
<div class="phone">
    
        <Form ref="form" :model="formInline" :rules="ruleInline">
            <FormItem prop="phoneNum">
                <Input type="text" v-model="formInline.phoneNum" placeholder="请输入登陆手机号" :maxlength="11">
                <span slot="prepend">+86</span>
                </Input>
            </FormItem>
            <FormItem prop="vcode">
                <div class="vcode">
                    <Input type="text" v-model="formInline.vcode" placeholder="请输入验证码" style="width: 273px;">
                    <img :src="imgData.message" alt="" slot="prepend">
                    </Input>
                    <Button type="primary" class="vcodeBtn" v-text="vcodeData.text" :disabled="vcodeData.disabled" ></Button>
                </div>
            </FormItem>
            <FormItem>
                <Button class="login-btn" style="width: 100%;" type="primary" size="large"  @click="handleSubmit('formInline')" >登录</Button>
            </FormItem>
            <p class="register" @click="clickRegister">注册新账号 <img :src="imgData.enter" alt=""></p>
        </Form>
   
</div>
</template>

<script>
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
export default {
    
    data() {
        return {
            formInline:{
               phoneNum:'',
               vcode:''
            },
            imgData: {
                message: require('@/assets/messagecode.png'),
                enter:require('@/assets/enter.1.png')
            },
            vcodeData: {
                text: '获取验证码',
                disabled: false,
            },
            ruleInline: {
                    phoneNum: [{
                  
                            required: true,
                            message: '请输入手机号',
                            trigger: 'blur'
                        },
                        {   
                            
                            pattern: phoneReg,
                            message: '请输入正确的手机号格式',
                            trigger: 'blur'
                        }
                    ],
                    vcode: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }]
                },
           
        }
    },
    methods: {
        handleSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
    //    跳转登录页面
    clickRegister(){
        this.$router.push({name:'register'});
    }

    }
}
</script>

<style lang="less" scoped>
.phone {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;

    .vcode {
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: -moz-flex;
        margin-bottom: 38px;

        .vcodeBtn {
            width: 140px;
            margin-left: 15px;
            color: #fff;
            background-color: #EDB1AA;

            &:hover {
                background-color: #D92410
            }
        }
    }

    .login-btn {
        width: 430px;
        background-color: #EDB1AA;
       color: #fff;
        &:hover {
            background-color: #D92410
        }
    }
    .register{
        text-align: right;
       color: #3a77f0;
        cursor: pointer;

    }
}
.ivu-btn-primary{
    border-color: #fff;
}
</style>
